<template>
  <div>

      <!--&lt;!&ndash;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45; top &#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&ndash;&gt;-->
      <!--<div class="top-header fixed-top border-bottom">-->
        <!--<div class="top-back">-->
          <!--<a href="javascript:history.go(-1)">返回</a>-->
        <!--</div>-->
        <!--<h2 class="f36 ">我要退款</h2>-->
        <!--<div class="top-right">-->
          <!--<a href="#" class="f32 color-f75e46 pr-30">联系商家</a>-->
        <!--</div>-->
      <!--</div>-->
      <!---------------------------- 退款类型 ---------------------------->
      <div class="p-head">
        <div class="refund-type bg-fff px-30 py-20 border-bottom">
          <div class="shadeopen f32 color-000 bg-f6 pl-25 pr re-type" @click="tuikuan">
            <span>{{isList}}</span><i class="pa refund-down"><img src="~images/mall100/jt-down.png" alt="" /></i>
          </div>
        </div>
      </div>
      <!---------------------------- 退款比例 ---------------------------->
      <div class="refund-bl bg-fff px-30 py-20 border-bottom" v-show="isTuikuan">
        <div class="f32 color-000 bg-f6 pl-25 pr">
          退款金额<input type="tel" v-model="biliText" placeholder="请输入退款金额" style="color: #f75e46;text-align: right"/>
          <!-- <em class="f32 color-f75e46">%</em> -->
        </div>
      </div>
      <!---------------------------- 退款原因 ---------------------------->
      <div class="refund-reason bg-fff px-30 py-20 clearfix pb-20">
        <div class="bg-f6 pl-25 py-30">
          <h3 class="f32 color-000">退款原因</h3>
          <textarea class="py-30 f32 color-64" name="" rows="" cols="" placeholder="请输入退款原因，可以多行输入" v-model="textareaRefund"></textarea>
        </div>
        <div class="upload fw border-none mt-30 mb-20">
          <!--<ul id="uploadimgul" class="ml-30">
            <li>
              <div class="upload-main">
                <a class="up-close" href="#"><img src="../images/upload-close.png" /></a><img src="../images/upload-img.png" /></div>
            </li>
          </ul>-->
          <div class="re-img pl-30">

            <uploadComponents
              :server="upload.server"
              :api="upload.api"
              :params="upload.params"
              :success="upload.success"
              :file.sync="upload.file"
              :crop="upload.crop"
              :width="upload.width"
              :height="upload.height"
              :ok="upload.ok"
              :cancel="upload.cancel">
            </uploadComponents>







            <!--<input type="file" class="up_file" name="fileupload" id="fileupload" onchange="javascript:UploadImage(this);">-->
            <!--<div id="container">-->
              <!--<a id="selectfiles2" href="javascript:void(0);" class='btn'><span class="f24 color-ccc">上传凭证</span></a>-->
            <!--</div>-->
            <!--<div id="ossfile"></div>-->
          </div>
        </div>
        <p class="f24 color-ccc">上传凭证将加快退款速度</p>
      </div>
      <!---------------------------- 底部按钮 ---------------------------->
      <div class="fixed-bottom01 bg-fff px-30 py-30 border-top">
        <button class="w-100 f36 color-fff bg-f75e46 lh100 text-center" type="button" @click="sumitRefund">提交申请</button>
      </div>
      <!---------------------------- 遮罩 ---------------------------->
      <div @click="cancleRefund" class="shade" v-if="hideTyep"></div>
      <!---------------------------- 隐藏退款类型 ---------------------------->
    <transition name="fadeUp">
      <div class="sharediv" v-if="hideTyep">
        <div class="operation">
          <a @click="choiceRefund(list)" v-for="list in dataRefund" :key="list">{{list}}</a>
        </div>
        <div class="upload-cancel">
          <a @click="cancleRefund">取消</a>
        </div>
      </div>
    </transition>
    </div>

</template>

<script>
  import uploadComponents from './DluploadRefund.vue';
  export default {
    name: 'DlreFund',
    data () {
      return {
        isList: '全额退款',
        hideTyep:false,
        isTuikuan:false,
        dataRefund:['全额退款','与商家协议部分退款'],
        textareaRefund:'',
        textareaNmae:'',
        biliText:1,
        path:'',
        upload: {
          server: "/api/mobile-fullauto-service/rs/upload/uploadimage",
          api: "",
          preview: true,
          crop: false,
          width: 400,
          height: 400,
          cancel: "取消",
          ok: "裁剪",
          success: (data) => {
            this.path = data.path;
            console.log(data);
          }
        },
        dlrePrice:null
      }
    },
    watch:{
      biliText:function (val, oldVal) {
        if (val == "") {
          return
        }
        //var re = /^[0-9]*[0-9][0-9]*$/
        let re=/^\d[-+]?\d*[.]?\d{0,2}$/
        if(re.test(val)){
          if(val>this.dlrePrice){
            this.biliText = oldVal
          }
        }else{
          this.biliText = oldVal
        }
      }
    },
    methods:{
      tuikuan(){
        this.hideTyep = true
      },
      cancleRefund(){
        this.hideTyep = false
      },
      choiceRefund(list){
        this.isList = list;
        if(this.isList=="与商家协议部分退款"){

          this.isTuikuan = true
        }else{
          this.isTuikuan = false
        }
        this.hideTyep = false
      },
      sumitRefund(){
        if (this.textareaRefund === "") {
          this.$messagebox.alert('退款原因不能为空');
          return false
        }
        if(this.isList=="全额退款"){
          this.isList = this.dlrePrice
        }else{
          this.isList = this.biliText
        }
        this.textareaNmae = this.textareaRefund +'<br><a class="img_box" target="_blank" href='+this.path+'>' +
          '<img src="'+this.path+'?x-oss-process=image/resize,m_fixed,w_112,h_112" atsrc="CmMXfSiM4E.jpg"></a>'

        console.log(this.textareaNmae)
        this.$http.get(this.$CONSTANTS.APIStore + "storeOrder/applyRefund",{
          params:{
            "refundAmount": this.isList,
            "id": this.$route.query.orderId,
            "applyRefundReason": this.textareaNmae
          }
        }).then((res)=>{
          console.log(res)
           if(this.$isLocalStorageSupported&&localStorage.getItem('refund')){
            localStorage.removeItem('refund')
          }
          this.$getAccount().then(account=>{
            if(account){
              this.$router.push(
                {name:'DlSeller',params: { state: "process" }}
              )
            }else{
              console.log('没登入')
              location.href = "/vue/login?returnUrl=" + encodeURIComponent(location.href);
            }
          })

        })
      }
    },
    components: {
      uploadComponents,
    },
    created(){

    },
    mounted(){
      var self = this;
      self.$bus.emit('headerText','我要退款');
      self.$bus.emit('proText', '');
      self.$bus.emit('isDl', true);
      if(this.$isLocalStorageSupported){
            this.dlrePrice=this.biliText=localStorage.getItem('refund')
        }
    },
    destroyed(){
      var self = this;
      self.$bus.emit('headerText', '');
      self.$bus.emit('isDl', false);
      self.$bus.emit('proText', '');
    }
  }
</script>


<style scoped>
  .dlIndex {
    margin-top: .96rem;
  }
  .fadeUp-enter-active {
    animation: fadeInUp 0.5s;
    -webkit-animation: fadeInUp 0.5s;
  }

  .fadeUp-leave-active {
    animation: fadeOutDown 0.5s;
    -webkit-animation: fadeOutDown 0.5s;
  }


</style>
